<template>
  <div>
    <el-button @click="editFeatures">编辑</el-button>
    <el-button @click="reset">重置</el-button>
    <el-button @click="trash">删除</el-button>
    <el-button @click="split">分割</el-button>

    <el-input v-model="showPoint" placeholder="" style="margin-top:5px">
      <template slot="append">
        <el-button type="primary" icon="el-icon el-icon-plus" @click="addMarker"></el-button>
      </template>
    </el-input>
  </div>
</template>

<script>
import mixins from '../mixins';
import MyFeatures from './features';
var renderInstance = null;
export default {
  name: 'EditTool',
  props: {
    getMap: {
      type: Function,
      required: true
    },
    getTool: {
      type: Function,
      required: true
    }
  },
  mixins: [mixins],
  data() {
    return {
      showPoint: '',
      polygons: {
        type: 'FeatureCollection',
        features: MyFeatures
      }
    };
  },
  methods: {
    editFeatures() {
      console.log(this.getMap());
      this.getTool('BaseMapTool').centerAt([120.27677015787458, 31.165714631795254]);
      this.getTool('BaseMapTool').setZoom(9.0650427652);
      let polygons = this.polygons;
      if (renderInstance) {
        renderInstance.remove();
      }
      console.log('polygons', polygons);
      renderInstance = this.getTool('RenderTool').render(polygons.features);
      this.getTool('EditTool').initTool();
      this.getTool('EditTool').setSnapFeatures(polygons.features);
      this.getTool('EditTool').enableSnap();
      // this.getTool("EditTool").editFeatures(polygons.features);
      this.getTool('EditTool').changeMode('snap_polygon');
      this.getTool('EditTool').events.onCreate = e => {
        console.log('onCreate', e);
      };
      this.getTool('EditTool').events.onUpdate = e => {
        console.log('onUpdate', e);
      };
      this.getTool('EditTool').events.onKeyDown = e => {
        if (e.keyCode === 8 || e.keyCode === 46) {
          this.getTool('EditTool').trash();
        }
      };
      this.getTool('EditTool').events.onDelete = e => {
        console.log('onDelete', e);
      };
    },
    addMarker() {
      if(renderInstance && this.showPoint && this.showPoint.split(',').length === 2) {
        var old = renderInstance.getData();
        var point = this.showPoint.split(',').map(Number);
        var marker = turf.point(point);
        marker.properties.sourceType = 'Marker';
        marker.properties.GlobalMarkLabelField = point[0];
        marker.properties.textColor = '#ff0000';

        var newFeatures = [...old.features, marker];
        renderInstance.setData(newFeatures);
      }
    },
    reset() {
      this.getTool('EditTool').reset();
    },
    trash() {
      this.getTool('EditTool').trash();
    },
    split() {
      let polygon = this.polygons.features[0];
      console.log(polygon);
      this.getTool('RenderTool').render([polygon]);
      this.getTool('EditTool').initTool();
      this.getTool('EditTool')
        .startSplit(polygon)
        .then(res => {
          console.log(res);
          let polygons = res.polygons;
          polygons.forEach(item => {
            item.properties = {
              sourceType: 'Polygon',
              width: 1,
              color: this.$MapUtils.RandomUtil.randomHexColor(),
              opacity: 0.5
            };
          });
          this.getTool('RenderTool').render(res.polygons);
        });
    }
  }
};
</script>

<style scoped></style>
